/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet, View, Text, Dimensions, TextInput } from 'react-native';
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
import { Icon, List, Button, InputItem, Checkbox } from 'antd-mobile-rn';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader, PCustumTabBar } from '../../library/comp';
import { Dialog, Http, PageBase } from '../../library/func';
import Design from '../../design';
import Config from '../../config';

/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class Power_Login extends PageBase {
	constructor(props){
		super(props);
		this.state = {

			// 表单绑定值
			regMobile: '',				// 注册手机号
			regCode: '',				// 注册验证码
			regPassword: '',			// 注册密码
			regAgreexy: true,			// 默认用户协议选中

			loginMobile: '',			// 登录手机号
			loginPassword: '',			// 登录密码

			//配置初始页面是哪个 0 登录 1注册
			showCPage:0,

			//配置用户协议是否显示
			showAgreeText:false,
			
			//登录页面的设置
			//设置顶部图片
			topImg: require('../../design/asset/image/logintop.png'),
			topImgWidth:Config.map.screen.width,
			topImgHeight:0,

			//输入区域的设置
			InputAreaHeight:0,

			//验证码秒数
			VercodeTime:10,
			VercodeText:"获取验证码",
			VercodeActive:true,

			//密码可见性
			seePass:require("../../design/asset/image/seepass.png"),
			noseePass:require("../../design/asset/image/noseepass.png"),
			canseePass:false,
        };
	}
	
	/************************************************************************************ Life */
	/**
	 * willMount
	 */
    componentWillMount(){
		// SplashScreen.hide();
		let img = resolveAssetSource(this.state.topImg);
		this.setState({
			topImgHeight:img.height * (Config.map.screen.width/img.width),
			InputAreaHeight:Config.map.screen.height - img.height * (Config.map.screen.width/img.width)-96-50
		})
    }
	
	/************************************************************************************ Func */
	/**
	 * 点击获取验证码
	 */
	getVerCode = ()=>{
		// if (this.state.regMobile == '') {
		// 	Dialog.text('请填写手机号码', 1);
		// 	return;
		// }

		// // 发送验证码
		// HttpTemp.post({
		// 	url: '/CPage/arrive/sendmsg.php',
		// 	data: {
		// 		set_mobile: this.state.regMobile,
		// 	},
		// 	success: (res)=> {
				
		// 		// 制作倒计时
		// 		let time = this.state.VercodeTime;
		// 		let text = this.state.VercodeText;
		// 		let time_time = "秒后重发";

		// 		Dialog.text('验证码发送成功', 1);

		// 		if(this.state.VercodeActive) {
		// 			//发送短信接口
		// 			this.setState({
		// 				VercodeTime: time,
		// 				VercodeText: time + time_time,
		// 				VercodeActive: false,
		// 			})

		// 			Runtime = ()=>{
		// 				setTimeout(()=>{
		// 					if(this.state.VercodeTime > 1){
		// 						this.setState({
		// 							VercodeTime: this.state.VercodeTime - 1,
		// 							VercodeText: this.state.VercodeTime - 1 + time_time,
		// 							VercodeActive: false,
		// 						})
		// 						Runtime();	
		// 					}else{
		// 						this.setState({
		// 							VercodeTime: time,
		// 							VercodeText: text,
		// 							VercodeActive: true,
		// 						})	
		// 					}	
		// 				},1000);		
		// 			}
		// 			Runtime();
		// 		}
		// 	}
		// });
	}

	/**
	 * 登录
	 */
	onLogin = ()=> {
		// HttpTemp.post({
		// 	url: '/CPage/arrive/login.php',
		// 	data: {
		// 		set_mobile: this.state.loginMobile,
		// 		set_password: this.state.loginPassword
		// 	},
		// 	success: (res)=> {
		// 		Dialog.text('登录成功', 1);

		// 		// 维护auth

		// 		// 跳转到首页
		// 	}
		// });
	}

	/**
	 * 注册
	 */
	onReg = () => {
		// HttpTemp.post({
		// 	url: '/CPage/arrive/register.php',
		// 	data: {
		// 		set_mobile: this.state.regMobile,
		// 		set_password: this.state.regPassword,
		// 		code: this.state.regCode
		// 	},
		// 	success: (res)=> {
		// 		Dialog.text('注册成功', 1);

		// 		// 维护auth
				

		// 		// 跳转到首页
		// 	}
		// });
	}

	/**
	 * 点击密码可见
	 */
	seePass = () => {
		if(this.state.canseePass){
			this.setState({
				canseePass:false
			})	
		}else{
			this.setState({
				canseePass:true
			})	
		}
	}

	/************************************************************************************ Render */
	render() {
		return (
			<CPage>
				<CScroll bg='#efeff4'>

						{/*  主体内容 star  */}
						<CColumn f='1'>

							{/* 头部 返回+背景 star */}
							<CRow bg='rgba(16, 23, 52, 1)' h='96' style={{ width:Config.map.screen.width}} f='0'>
								<CHand w='60' h='60' abs left='20' top='20'
									onPress={()=>{
										// alert('111')
										this.nav.goBack()
									}}
								>
									<CIcon icon={ Design.icon["gobcak"] } w='44' h='44' mt='3' color='#fff' />
								</CHand>
							</CRow>
							<CColumn style={{ backgroundColor:"rgba(16, 23, 52, 1)", width:Config.map.screen.width,height:this.state.topImgHeight}} f='0'>
								<CImage
									style={{width:Config.map.screen.width, height:this.state.topImgHeight}}
									source={this.state.topImg}
								/>
							</CColumn>
							{/* 头部 返回+背景 end */}

							<CRow x='center' style={{backgroundColor:"#fff", width:Config.map.screen.width/24*22,borderRadius:5,height:this.state.InputAreaHeight, marginLeft:Config.map.screen.width/24*1, marginTop:-60 }} f='0'>
								<CColumn style={{width:Config.map.screen.width/24*22}}>
									<CBetween style={{ width:'100%' }} pt='28' pb='10'>

										<ScrollableTabView
											tabBarActiveTextColor='#26c75e'
											tabBarInactiveTextColor='#aeaeae'
											style={{justifyContent:'center',backgroundColor:'#fff'}}
											tabBarTextStyle={{fontSize:16}}
											tabBarUnderlineStyle={{backgroundColor:'#26c75e',width:'10%',left:'20%',height:2}}
											initialPage={0}
											renderTabBar={(e) => <PCustumTabBar style={{height:30,borderBottomColor:'transparent',borderBottomWidth:0,backgroundColor:'#fff',paddingTop:10}} ></PCustumTabBar>}
										>

											{/* 登录 star  */}
											<CColumn ma='35' tabLabel='登陆'>
												{/* 登录表单 star  */}
												<CLine h='88' pt='12' pb='5' y='center' px='5' mx='40' bb='1 #eee' f='0' >
													<CHand h='80' y='center'>
														<CImage mr='15' w='34' h='34' df 
															source={require("../../design/asset/image/loginphone.png")}
														/>
														{/* <CIcon icon={ Design.icon["login-phone"] } w='32' h='32' color='#8f8f8f' df mr='15' ></CIcon> */}
													</CHand>
													<TextInput
														keyboardType="numeric"
														style={{height: 40, lineHeight:40,flex:1,fontSize:13, padding:0}}
														onChangeText={(text)=> {
															this.setState({
																loginMobile: text
															})
														}}
														value={this.state.loginMobile}
														clearTextOnFocus={true}
														placeholder="请输入手机号码"
														placeholderTextColor="#c9c9c9"
														underlineColorAndroid="transparent"
													/>
												</CLine>
												<CLine h='88' pt='12' pb='5' y='center' px='5' mx='40' bb='1 #eee' f='0'>
													<CHand h='80' y='center'>
														<CImage w='34' h='34' df mr='15'
															source={require("../../design/asset/image/loginpass.png")}
														/>
														{/* <CIcon icon={ Design.icon["login-password"] } w='36' h='36' color='#8f8f8f' df mr='15' ></CIcon> */}
													</CHand>
													<TextInput
														style={{height: 40, lineHeight:40,flex:1,fontSize:13, padding:0}}
														onChangeText={(text)=> {
															this.setState({
																loginPassword: text
															})
														}}
														value={this.state.loginPassword}
														clearTextOnFocus={true}
														placeholder="请输入密码"
														placeholderTextColor="#c9c9c9"
														underlineColorAndroid="transparent"
														secureTextEntry={true}
													/>
												</CLine>
												{/* 登录表单 end */}

												{/* 登录 忘记密码 star */}
												<CColumn py='10' mt='30' mx='40' f='0'>
													<CButton {...Design.global.commonButton} py='17' onPress={this.onLogin}>登录</CButton>
													<CRow style={{width:'100%'}} x='right' mt='18' f='0' h='30'>
														<CItemX x='right' y='center'>
															<CIcon icon={ Design.icon["login-help"]} w='28' h='28' color='#02B349' mr='8'></CIcon>
															<CText size='24' color='#02B349'>忘记密码</CText>
														</CItemX>
													</CRow>
												</CColumn>
												{/* 登录 忘记密码 end */}

											</CColumn>
											{/* 登录 end */}

											{/* 注册 star  */}
											<CColumn ma='25' tabLabel='注册' y='top'>
												{/* 注册表单 star */}
												<CLine h='88' pt='12' pb='5' y='center' px='5' mx='40' bb='1 #eee' f='0'>
													<CHand h='80' y='center'>
														<CImage mr='15' w='34' h='34' df 
															source={require("../../design/asset/image/loginphone.png")}
														/>
														{/* <CIcon icon={ Design.icon["login-phone"] } w='32' h='32' color='#8f8f8f' df mr='15' ></CIcon> */}
													</CHand>
													<TextInput
														keyboardType="numeric"
														style={{height: 40, lineHeight:40,flex:1,fontSize:13, padding:0}}
														onChangeText={(text)=> {
															this.setState({
																regMobile: text
															})
														}}
														value={this.state.regMobile}
														clearTextOnFocus={true}
														placeholder="请输入手机号码"
														placeholderTextColor="#c9c9c9"
														underlineColorAndroid="transparent"
													/>
												</CLine>
												<CLine h='88' pt='12' pb='5' y='center' px='5' mx='40' bb='1 #eee' f='0'>
													<CHand h='80' y='center'>
														<CImage mr='15' w='32' h='32' df 
															source={require("../../design/asset/image/safepass.png")}

														/>
														{/* <CIcon icon={ Design.icon["loginsafe"] } w='32' h='32' color='#8f8f8f' df mr='15' ></CIcon> */}
													</CHand>
													<TextInput
														style={{height: 40, lineHeight:40,flex:1,fontSize:13, padding:0}}
														onChangeText={(text)=> {
															this.setState({
																regCode: text
															})
														}}
														value={this.state.regCode}
														clearTextOnFocus={true}
														placeholder="请输入验证码"
														placeholderTextColor="#c9c9c9"
														underlineColorAndroid="transparent"
														secureTextEntry={true}
													/>
													<CHand 
														h='45' py='4' ba='1 #00cc66' ra='3' x='center' y='center'
														style={{width:Config.map.screen.width/24*1+60,}}
														onPress={this.getVerCode}
													>
														<CText size='24' lh='40' color='#0c6'>{this.state.VercodeText}</CText>
													</CHand>
												</CLine>
												<CLine h='88' pt='12' pb='5' y='center' px='5' mx='40' bb='1 #eee' f='0'>
													<CHand h='80' y='center'>
														<CImage w='34' h='34' df mr='15'
															source={require("../../design/asset/image/loginpass.png")}
														/>
														{/* <CIcon icon={ Design.icon["login-password"] } w='36' h='36' color='#8f8f8f' df mr='15' ></CIcon> */}
													</CHand>
													{
														!this.state.canseePass?(
															<TextInput
																style={{height: 40, lineHeight:40,flex:1,fontSize:14, padding:0}}
																onChangeText={(text)=> {
																	this.setState({
																		regPassword: text
																	})
																}}
																value={this.state.regPassword}
																clearTextOnFocus={true}
																placeholder="请设置6-12位密码"
																placeholderTextColor="#c9c9c9"
																underlineColorAndroid="transparent"
																secureTextEntry={true}
															/>
														):(
															<TextInput
																style={{height: 40, lineHeight:40,flex:1,fontSize:14, padding:0}}
																onChangeText={(text)=> {
																	this.setState({
																		regPassword: text
																	})
																}}
																value={this.state.regPassword}
																defaultValue={this.state.regPassword}
																clearTextOnFocus={true}
																placeholder="请设置6-12位密码"
																placeholderTextColor="#c9c9c9"
																underlineColorAndroid="transparent"
															/>
														)
													}
													
													{
														!this.state.canseePass?(
															<CHand 
																onPress={this.seePass}
																h='80' x='center' y='center' df
															>
																<CImage
																	w="30"
																	h="30"
																	source={this.state.seePass} 
																/>
																{/* <CIcon icon={ Design.icon["login-eyes"] } w='30' h='30'></CIcon> */}
															</CHand>
														):(
															<CHand 
																onPress={this.seePass}
																h='80' x='center' y='center' df
															>
																<CImage
																	w="30"
																	h="30"
																	source={this.state.noseePass} 
																/>
																{/* <CIcon icon={ Design.icon["login-close-eyes"] } w='30' h='30'></CIcon> */}
															</CHand>
														)
													}

												</CLine> 
												{/* 注册表单 end */}
												
												{/* 注册按钮 star */}
												<CColumn py='10' mt='30' mx='40'>
													<CButton  {...Design.global.commonButton} py='17' ra='3' onPress={e=>this.onReg()}>注册</CButton>
												</CColumn>
												{/* 注册按钮 end */}
												
												{/* 阅读协议 star */}
												{/* <CItemY x="center" style={{ width:'100%'}} h='30' mt='25' f='0'> */}
												<CItemX x='center' style={{width:'100%'}} h='30' f='0' y='top'>
													<Checkbox
														checked={this.state.regAgreexy}
														style={{ tintColor: '#00CC66', width:12, height:12, marginTop:2, marginRight:3 }}
														onChange={(event) => {
															this.setState({ 
																regAgreexy: event.target.checked
															});
														}}								  
													/>
													<CHand
														onPress={()=>{
															this.nav.navigate('Power_Agreement')
														}}
													>
														<CText color='#6b6b6b' size='24'>我已经并阅读《用户注册协议》</CText>
													</CHand>
												</CItemX>
												{/* </CItemY> */}
												{/* 阅读协议 end */}

											</CColumn>
											{/* 注册 end */}

										</ScrollableTabView>

									</CBetween>

								</CColumn>
							</CRow>
						</CColumn>
						{/*  主体内容 end  */}
					
				</CScroll>
			</CPage>
		);
	}
}
